<template>
	<view class="">
		<view style="position: fixed;top: 0rpx;z-index: 999;width: 100%;padding-bottom: 20rpx;background: #ffffff;">
			<view class="padding-lr padding-top-sm bg  ">
				<u-search class="flex-sub" placeholder="请输入技师电话或名字" :focus="false" shape="square"
					v-model="artificerName" :show-action="true" :animation="true" bg-color="#F7F7F7" color="#1A1A1A"
					@search="getlist()" action-text="搜索" @custom="getlist()"></u-search>
			</view>
			<!-- <view>
				<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#2FB57A">
				</u-tabs>
			</view> -->
		</view>

		<view v-if="orderList.length" style="margin-top:120rpx;">
			<view class="list flex flex-wrap justify-center">
				<view class="list-box-item " v-for="(item,index) in orderList" :key="index">
					<view class="list-box-item-l flex align-center">
						<view style="position: relative;">
							<image :src="item.artificerImg?item.artificerImg:'../../static/logo.png'"
								@click="goUserinfo(item)"></image>
							<!-- <view class="shiming">已认证</view> -->
						</view>
						<view class="flex align-center justify-between" style="width: 75%;">
							<view class="info">
								<text>{{item.artificerName}}</text>
								<!-- <text @click="bindphone(item.phone)">{{item.phone}}</text> -->
								<view @click="bindphone(item.phone)">
									<image src="../../static/images/phone.png"></image>
								</view>
								
							</view>
							<view class="label" v-if="item.status==1"><text class="zai"></text>在线</view>
							<view class="label" v-if="item.status==2"><text class="xia"></text>下线</view>
						</view>
					</view>
					<view style="width: 100%;height: 1rpx;background: #E4E1E6;margin: 30upx 0;"></view>
					<view class="flex">
						<view style="width: 25%;text-align: center;" @click="goOrder(item)">
							<image src="../../static/images/order.png" style="width: 45rpx;height: 45rpx;"></image>
							<view class="text-26 margin-top-xs">TA的订单</view>
						</view>
						<view style="width: 25%;text-align: center;" @click="getshouyi(item)">
							<image src="../../static/images/money.png" style="width: 45rpx;height: 45rpx;"></image>
							<view class="text-26 margin-top-xs">TA的收益</view>
						</view>
						<view style="width: 25%;text-align: center;" @click="openMap(item)">
							<image src="../../static/images/address.png" style="width:38rpx;height: 45rpx;"></image>
							<view class="text-26 margin-top-xs">TA的位置</view>
						</view>
						<view style="width: 25%;text-align: center;" @click="goUserinfo(item)">
							<image src="../../static/images/msg.png" style="width: 45rpx;height: 45rpx;"></image>
							<view class="text-26 margin-top-xs">TA的信息</view>
						</view>

					</view>
					<view class="flex margin-top">
						<view style="width: 25%;text-align: center;" @click="openPopup(item)">
							<image src="../../static/images/mangshi.png" style="width: 45rpx;height: 45rpx;"></image>
							<view class="text-26 margin-top-xs">TA的忙时</view>
						</view>
						<view style="width: 25%;text-align: center;" @click="goAddress(item)">
							<image src="../../static/images/dingw.png" style="width: 45rpx;height: 45rpx;"></image>
							<view class="text-26 margin-top-xs">位置记录</view>
						</view>
						<view style="width: 25%;text-align: center;" @click="getWeizhi(item)">
							<image src="../../static/images/jilu.png" style="width: 45rpx;height: 45rpx;"></image>
							<view class="text-26 margin-top-xs">签到记录</view>
						</view>
						<view style="width: 25%;text-align: center;" @click="deteStaffUser(item)">
							<image src="../../static/images/tui.png" style="width: 45rpx;height: 45rpx;"></image>
							<view class="text-26 margin-top-xs">踢出</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<empty v-if="orderList.length == 0"></empty>

		<!-- 经验筛选 -->
		<!-- <u-select v-model="Cityshow" :list="cityList" @confirm="getCity"></u-select> -->
	</view>
</template>

<script>
	import meTabs from "@/components/mescroll-uni/me-tabs/me-tabs.vue";
	import empty from '@/components/empty.vue'
	import RenDropdownFilter from '@/components/ren-dropdown-filter/ren-dropdown-filter.vue'
	export default {
		components: {
			meTabs,
			empty,
			RenDropdownFilter
		},
		data() {
			return {
				loading: true, // 是否显示骨架屏组件
				city: '请选择城市',
				latitude: '',
				longitude: '',
				orderList: [],
				artificerName: '',

				page: 1,
				limit: 10,
				token: '',
				XCXIsSelect: '否',
				isVip: false,
				myId: uni.getStorageSync('userId') ? uni.getStorageSync('userId') : '',
				showModal: true,
				arr: [],

				massageTypeId: '',
				// cityList: [],
				// list: [{
				// 	name: '全部'
				// }, {
				// 	name: '待审核'
				// }, {
				// 	name: '已审核'
				// }],
				// current: 0,
				show: false,
				artificerId: '',
				Mangshi: []
			}
		},
		onLoad(e) {
			console.log(e.massageTypeId)
			let that = this
			that.massageTypeId = e.massageTypeId
			// that.page = 1
			// that.getlist()
			// that.getTypeList();
		},
		onShow() {
			let that = this
			that.token = uni.getStorageSync('token')
			that.page = 1
			that.getlist()
			that.myId = uni.getStorageSync('userId')
		},
		methods: {
			openPopup(item) {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/my/mangshi?userId=' + item.userId + '&artificerId=' + item.artificerId
					})
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}
				// this.artificerId = item.artificerId
				// this.getMangshi()
			},
			getMangshi() {
				this.$Request.post("/app/artificerTime/selectArtificerTimeByArtificerId?artificerId=" + this.artificerId)
					.then(res => {
						if (res.code == 0) {
							this.show = false
							this.Mangshi = res.data
						}
					});
			},
			// 拨打电话
			bindphone(phone) {
				let that = this
				if (that.token) {
					uni.showModal({
						title: '提示',
						content: '是否拨打电话',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定', phone);
								uni.makePhoneCall({
									phoneNumber: phone //仅为示例
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}

			},
			//技师位置
			openMap(item) {
				let that = this
				if (that.token) {
					uni.openLocation({
						latitude: item.latitude - 0, //要去的纬度-地址       
						longitude: item.longitude - 0, //要去的经度-地址
						// name: item.name, //地址名称
						address: item.address, //详细地址名称
						success: function() {
							console.log('导航成功');
						},
						fail: function(error) {
							console.log(error)
						}
					});
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}
			},
			//位置记录
			goAddress(item) {
				if (this.token) {
					uni.navigateTo({
						url: '/my/shop/address?userId=' + item.userId + '&artificerId=' + ''
					})
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}
			},
			getWeizhi(item) {
				if (this.token) {
					uni.navigateTo({
						url: '/my/shop/qiandao?userId=' + item.userId + '&artificerId=' + ''
					})
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}
			},
			//技师收益
			getshouyi(item) {
				if (this.token) {
					uni.navigateTo({
						url: '/my/shuju/index?userId=' + item.userId + '&artificerId=' + item.artificerId
					})
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}

			},
			//踢出技师
			deteStaffUser(item) {
				let that = this
				if (that.token) {
					uni.showModal({
						title: '提示',
						content: '确定踢出当前技师吗？',
						success: function(res) {
							if (res.confirm) {
								that.$Request.post("/app/consortia/deleteConsortiaUser?userId=" + item.userId)
									.then(res => {
										if (res.code == 0) {
											uni.showToast({
												title: '踢出成功',
												icon: 'none'
											})
											that.page = 1
											that.getlist()
										}
									});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}
			},
			//技师订单
			goOrder(item) {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/order/index?artificerId=' + item.artificerId
					})
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}
			},
			//技师信息
			goUserinfo(item) {
				if (this.token) {
					uni.navigateTo({
						url: '/my/gird/userinfo?artificerId=' + item.artificerId
					})
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}
			},
			// 开启订阅消息
			openMsg() {
				console.log('订阅消息')
				var that = this
				uni.getSetting({
					withSubscriptions: true, //是否获取用户订阅消息的订阅状态，默认false不返回
					success(ret) {
						if (ret.subscriptionsSetting.itemSettings) {
							uni.setStorageSync('sendMsg', true)
							uni.openSetting({ // 打开设置页 
								success(rea) {
									console.log(rea.authSetting)
								}
							});
						} else { // 用户没有点击“总是保持以上，不再询问”则每次都会调起订阅消息
							console.log(99999)
							uni.setStorageSync('sendMsg', false)
							uni.showModal({
								title: '提示',
								content: '为了更好的体验,请绑定消息推送',
								confirmText: '确定',
								cancelText: '取消',
								success: function(res) {
									if (res.confirm) {
										wx.requestSubscribeMessage({
											tmplIds: that.arr,
											success(re) {
												var datas = JSON.stringify(re);
												if (datas.indexOf("accept") != -1) {
													console.log(re)
													// uni.setStorageSync('sendMsg', true)
												}
											},
											fail: (res) => {
												console.log(res)
											}
										})
										// uni.setStorageSync('sendMsg', true)
										console.log('确认')
										that.showModal = false
									} else if (res.cancel) {
										console.log('取消')
										// uni.setStorageSync('sendMsg', false)
										that.showModal = true
									}
								}
							})
						}
					}
				})
			},
			getlist() {
				let token = this.$queue.getData('token');
				if(!token){
					return;
				}
				let data = {
					page: this.page,
					limit: this.limit,
					artificerName: this.artificerName
				}

				this.$Request.get("/app/consortia/selectUserListByConsortiaId", data).then(res => {
					this.loading = false;
					if (res.code == 0) {
						for (let i = 0; i < res.data.list.length; i++) {
							if (res.data.list[i].lifePhoto) {
								res.data.list[i].lifePhoto = res.data.list[i].lifePhoto.split(',')
							}
						}
						if (this.page == 1) {
							this.orderList = res.data.list
						} else {
							this.orderList = [...this.orderList, ...res.data.list]
						}
					}
					uni.stopPullDownRefresh();
				})
			},
			// 筛选
			// change(index) {
			// 	this.current = index;
			// },

		},
		onReachBottom: function() {
			this.page = this.page + 1;
			this.getlist()
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getlist()
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;
	}

	// .zz_view {
	// 	// width: 220upx;
	// 	background: #e8fdf6;
	// 	color: #73c2a2;
	// 	font-size: 24rpx;
	// 	padding: 6rpx 10rpx;
	// 	border-radius: 10rpx;
	// }

	// .zpmore_view {
	// 	background: #2FB57A;
	// 	width: 120upx;
	// 	text-align: center;
	// 	border-radius: 10rpx;
	// 	height: 42rpx;
	// 	line-height: 42rpx;
	// 	font-size: 24rpx;
	// 	color: #FFFFFF;
	// 	margin-left: 10rpx;
	// }

	// .byy_view {
	// 	// background: #2FB57A;
	// 	width: 120upx;
	// 	text-align: center;
	// 	border-radius: 50rpx;
	// 	height: 46rpx;
	// 	line-height: 46rpx;
	// 	font-size: 24rpx;
	// 	color: #999999;
	// 	border: 3upx solid #999999;
	// 	margin-top: 6rpx;
	// }

	// .kyy_view {
	// 	background: #2FB57A;
	// 	width: 120upx;
	// 	text-align: center;
	// 	border-radius: 50rpx;
	// 	height: 46rpx;
	// 	line-height: 46rpx;
	// 	font-size: 24rpx;
	// 	color: #FFFFFF;
	// 	margin-top: 6rpx;
	// }

	.bg {
		background: #FFFFFF;
	}

	.list {
		width: 100%;
		height: auto;
		margin-top: 106rpx;

		.list-box-item {
			width: 94%;
			// height: 148rpx;
			border-radius: 24rpx;
			background-color: #FFFFFF;
			margin-bottom: 30rpx;
			padding: 30upx 0;
		}

		.list-box-item-l {
			image {
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				margin-left: 30rpx;
				margin-right: 30rpx;
				z-index: 1;
			}

			.info {
				display: flex;
				align-items: center;
				justify-content: center;
				text {
					color: #171717;
					font-size: 32rpx;
					font-weight: 800;
				}

				image {
					width: 27rpx;
					height: 26rpx;
					margin: 0 10rpx;
				}

				text {
					color: #171717;
					font-size: 28rpx;
					font-weight: bold;
					margin-left: 18rpx;
				}
			}

			.address {
				color: #999999;
				font-size: 26rpx;
				font-weight: 500;
			}
		}
	}

	.label {
		font-size: 24rpx;
		display: flex;
		align-items: center;


		.zai {
			display: inline-flex;
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			background: #2FB57A;
			margin-right: 5rpx;
			margin-top: 5rpx;
		}

		.xia {
			display: inline-flex;
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			background: #333333;
			margin-right: 5rpx;
			margin-top: 5rpx;
		}
	}

	.shiming {
		position: absolute;
		// top:0;
		right: 0;
		left: 0;
		bottom: -30rpx;
	}
</style>
